<template>
	<view class="wanl-order-list">
		<view class="navbar">
			<view class="nav-item text-df" v-for="(item, index) in navList" :key="item.state" :class="{ current: tabCurrentIndex === index }" @tap="tabClick(index)">
				{{ item.text }}
			</view>
		</view>
		<swiper :current="tabCurrentIndex" style="height: calc(100% - 60rpx)" duration="300" @change="changeTab">
			<swiper-item class="tab-content" v-for="(tag, key) in navList" :key="tag.state">
				<scroll-view class="list-scroll-content" scroll-y @scrolltolower="loadData">
					<!-- 空白页 -->
					<wanl-empty text="还没有中奖,再接再厉吧" src="ticket_default3x" v-if="tag.loaded === true && tag.cardList.length === 0"/>
					<!-- 订单列表 -->
					<view class="wanl-coupon">
						<view v-for="(coupon, seat) in tag.cardList" :key="coupon.id" :class="[coupon.state == 0 ? coupon.type : 'wanl-gray']" class="item margin-bj radius-bock" @tap="onDetails(coupon)">
							<image :src="$wanlshop.appstc('/coupon/bg_coupon_3x.png')" class="coupon-bg "></image>
							<image v-if="coupon.state == 1" :src="$wanlshop.appstc('/coupon/img_coupon_beused_3x.png')" class="coupon-sign"></image>
							<image v-if="coupon.state == 2" :src="$wanlshop.appstc('/coupon/img_coupon_failure_3x.png')" class="coupon-sign"></image>
							
							<view class="item-right padding-bj">
								<view class="shop">
									<view class="name">
										<text class=" margin-right-xs">{{coupon.goods.title}}(数量 X1)</text> 
									</view>
									
								</view>
								<view class="shop">
									<view class="name">
										<text class=" margin-right-xs">获得时间:{{$wanlshop.timeFormat(coupon.updatetime,'yyyy-mm-dd hh:MM:ss')}}</text> 
									</view>
									
								</view>
								
								
								<view class="content text-min">
									
									<view class="cu-btn sm round line-colour" v-if="coupon.state == 0" @tap.stop="onApply(coupon.goods_id)">
										立即使用
									</view>
									<view class="cu-btn sm round line-colour"style="float: right;" v-if="coupon.state == 0" @tap.stop="onScoreRank(coupon.goods_id)">
										转赠好友
									</view>
								</view>
							</view>
						</view>
					</view>
					<uni-load-more :status="tag.loadingType" :content-text="contentText"/>
					<view class="edgeInsetBottom"></view> 
				</scroll-view>
			</swiper-item>
		</swiper>
		
		<view class="marke" v-show="seePoups">
			<view class="withdraw">
				<icon @click="seePoups=false" class="cancel" type="clear" size="24" color="#ccc"  ></icon>
				<view class="markeTitle">转赠给好友</view>
				<input class="moneyBox" type="text" cursor-spacing="50px" placeholder="请输入好友登陆账号"  :value="number" placeholder-class="tips" @blur="changenumber"/>
				
				<!-- <view class="btnGroup item-flex flex-around">
					<button>取消</button>
				</view> -->
				<button @click="tijiao">立即兑换</button>
				
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			tabCurrentIndex: 0,
			navList: [
				{
					state: 0,
					text: '未兑奖',
					loadingType: 'more',
					current_page: 1,
					cardList: []
				},
				{
					state: 1,
					text: '已兑奖',
					loadingType: 'more',
					current_page: 1,
					cardList: []
				},
				{
					state: 2,
					text: '已转让',
					loadingType: 'more',
					current_page: 1,
					cardList: []
				}
			],
			contentText: {
				contentdown: ' ',
				contentrefresh: '正在加载...',
				contentnomore: ''
			},
			seePoups:false,
			uuser_name:'',
			coupon_id:''
		};
	},
	onLoad(options) {
		this.loadData();
	},
	methods: {
		tijiao(){
			this.$api.post({
				url: '/wanlshop/user/changecoupon',
				data: {
					uuser_name: this.uuser_name,
					coupon_id:this.coupon_id
				},
				success: res => {
					console.log('1111')
					//uni.stopPullDownRefresh();
					
						this.seePoups=false;
							uni.showToast({
								title:res,
								icon:'none'
							})
					
				}
			});
		},
		changenumber(e){
			
			this.uuser_name=e.detail.value
			//console.log(e)
			
		},
		onScoreRank(coupon_id){
			this.seePoups=true,
			this.coupon_id=coupon_id
		},
		//swiper 切换
		changeTab(e) {
			this.tabCurrentIndex = e.target.current;
			this.loadData('tabChange');
		},
		//顶部tab点击
		tabClick(index) {
			this.tabCurrentIndex = index;
		},
		//获取订单列表
		async loadData(source) {
			//这里是将订单挂载到tab列表下
			let index = this.tabCurrentIndex;
			let navItem = this.navList[index];
			let state = navItem.state;
			//判断是否最后一页
			if (navItem.loadingType == 'noMore') {
				return;
			}
			//tab切换只有第一次需要加载数据
			if (source === 'tabChange' && navItem.loaded === true) {
				return;
			}
			//防止重复加载
			if (navItem.loadingType === 'loading') {
				return;
			}
			navItem.loadingType = 'loading';
			// 获取列表
			this.$api.get({
				url: '/wanlshop/coupon/getMyList2',
				data: {
					state: state,
					page: navItem.current_page
				},
				success: res => {
					navItem.current_page = res.current_page; //当前页码
					if (res.last_page === res.current_page) {
						navItem.loadingType = 'noMore';
						console.log(res)
					} else {
						navItem.loadingType = 'more';
						navItem.current_page++;
					}
					let cardList = res.data.filter(item => {
						if (state === 0) {
							//0为全部订单
							return item;
						}
						return Number(item.state) === state;
					});
					cardList.forEach(item => {
						navItem.cardList.push(item);
					});
					//loaded新字段用于表示数据加载完毕，如果为空可以显示空白页
					this.$set(navItem, 'loaded', true);
				}
			});
		},
		onApply(id){
			this.$wanlshop.to(`/pages/product/goods?id=${id}`);
		},
		onDetails(data){
			// this.$wanlshop.to(`/pages/user/coupon/details?data=${JSON.stringify(data)}`);
		}
	}
};
</script>

<style>
	.marke{
		width: 100%;
		height: 100%;
		position: fixed;
		top:0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 990;
		background: rgba(0,0,0,0.7);
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.withdraw{
		width: 80%;
		background: #fff;
		border-radius: 20rpx;
		position: relative;
	}
	.markeTitle{
		width: 100%;
		height: 88rpx;
		line-height: 88rpx;
		font-size: 32rpx;
		color: #333;
		text-align: center;
		background: #f5f5f5;
		border-radius: 20rpx 20rpx 0 0;
	}
	.moneyBox{
		width: 90%;
		height: 100rpx;
		line-height: 100rpx;
		border-bottom: 2rpx solid red;
		margin: 20rpx 5%;
		text-align: center;
		font-size: 42rpx;
		font-weight: bold;
		color: red;
	}
	.tips{
		font-size: 30rpx;
		color: #bebebe;
		text-align: center;
		font-weight: normal;
	}
	.withdraw button{
		width: 90%;
		margin: 20rpx 5%;
		margin-top: 40rpx;
		font-size: 32rpx;
		height: 88rpx;
		line-height: 88rpx;
		border: none;
		background: #007AFF;
		color: #fff;
	}
	.withdraw button::after{
		border: none;
	}
	.cancel{
		position: absolute;
		top: -20rpx;
		right: -20rpx;
		background: #fff;
		border-radius: 50%;
		z-index: 999;
		
	}
page {
	height: 100%;
}
</style>
